import React, { useEffect, useState } from "react";
import { DownOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { Dropdown, Space, Button, Modal, Form, Input, message } from 'antd';
import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import JSEncrypt from 'jsencrypt';
import { clearUserInfo, clearToken } from "../../store/modules/userInfo";
import { setCollapsed } from "../../store/modules/theme";
import { updatePassword, getPublicKey } from './../../api/login'
import styles from "./index.module.scss";
import type { RootState } from "../../store";
import type { MenuProps, FormProps } from 'antd';
import type { userPasswordType } from './../../types/loginType'


const HeaderComponent = () => {
    const [form] = Form.useForm();
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const loginOut = () => {
        dispatch(clearUserInfo());
        dispatch(clearToken());
        navigate("/login")
    }
    const account = useSelector((state: RootState) => state.userInfo.info.account);
    const collapsed = useSelector((state: RootState) => state.theme.collapsed);
    const publicKey = useSelector((state: RootState) => state.userInfo.publicKey);
    const [showOut, setShowOut] = useState(false);
    const [showResetPassword, setShowResetPassword] = useState(false);

    const items: MenuProps['items'] = [
        {
            key: '1',
            label: <Button onClick={() => setShowResetPassword(true)}>修改密码</Button>,
        },
        {
            key: '2',
            label: <Button onClick={() => setShowOut(true)}> 退出登录</Button>,
        },
    ];
    const onFinish: FormProps<userPasswordType>['onFinish'] = (e: userPasswordType) => {
        if (e.newPassword !== e.verifyPassword) {
            return message.info('两次新密码不一致！');
        }
        const encryptor = new JSEncrypt();
        encryptor.setPublicKey(publicKey);
        const oldPassword = encryptor.encrypt(e.oldPassword) as string;
        const newPassword = encryptor.encrypt(e.newPassword) as string;
        updatePassword({ newPassword, oldPassword }).then(res => {
            if (res.code === 0) {
                setShowOut(false);
                message.success('修改成功,请重新登录！');
                loginOut();
            }
        })
    };
    // 修改密码
    const onSubmitForm = () => {
        form.submit();
    }
    
    return (
        <div className={styles.header}>
            <Button type="primary" className={styles.collapsed} onClick={() => dispatch(setCollapsed())}>
                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </Button>
            <p>欢迎各位合伙人登录本系统，祝您早日财富自由！！！！</p>
            <Dropdown menu={{ items }} placement="bottom">
                <Space>
                    <p> {account}</p>
                    <DownOutlined style={{ color: "#fff" }} />
                </Space>
            </Dropdown>
            {/* 二次确认框 */}
            <Modal title="温馨提示" open={showOut} onOk={loginOut} onCancel={() => setShowOut(false)}>
                <p>请确认退出登录？</p>
            </Modal>
            {/* 修改密码弹窗 */}
            <Modal title="修改密码" open={showResetPassword} onOk={onSubmitForm} onCancel={() => setShowResetPassword(false)}>
                <Form
                    form={form}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item<userPasswordType>
                        label="旧密码"
                        name="oldPassword"
                        rules={[{ required: true, message: '请输入旧密码!' }]}
                    >
                        <Input.Password placeholder="请输入旧密码!" />
                    </Form.Item>
                    <Form.Item<userPasswordType>
                        label="新密码"
                        name="newPassword"
                        rules={[{ required: true, message: '请输入新密码!' }]}
                    >
                          <Input.Password placeholder="请输入新密码!" />
                    </Form.Item>
                    <Form.Item<userPasswordType>
                        label="验证"
                        name="verifyPassword"
                        rules={[{ required: true, message: '再次输入新密码!' }]}
                    >
                          <Input.Password placeholder="再次输入新密码!" />
                    </Form.Item>
                </Form>
            </Modal>

        </div>
    )
}
export default HeaderComponent;